import { Button, Col, Row, Upload } from 'antd';
import axios from 'axios';
import COS from 'cos-js-sdk-v5';
import React, { useState } from 'react';

function Myupload({ value, onChange }) {
  const [loading, setLoading] = useState(false);

  console.log('[value]', value);
  const upload = async (options) => {
    setLoading(true);
    try {
      const resp = await axios.get('/admin/cos/token', {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
      });
      const data = resp?.data?.data;
      const cosOptions = {
        SecretId: data.credentials.tmpSecretId, // sts服务下发的临时 secretId
        SecretKey: data.credentials.tmpSecretKey, // sts服务下发的临时 secretKey
        SecurityToken: data.credentials.sessionToken, // sts服务下发的临时 SessionToken
        StartTime: data.startTime,
        ExpiredTime: data.expiredTime,
      };
      const cos = new COS(cosOptions);

      cos.uploadFile(
        {
          Bucket: data.bucket, // Bucket 格式：BucketName-APPID
          Region: data.region, // 地域
          Key: `okeydo/${options.file.name}`, // 文件名
          Body: options.file, // 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象
          SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值，超过5MB使用分块上传，非必须
          onTaskReady: function (taskId) {
            // 非必须
            console.log(taskId);
          },
          onProgress: function (progressData) {
            // 非必须
            console.log(JSON.stringify(progressData));
          },
        },
        (err, data2) => {
          if (err) {
            setLoading(false);
            console.log('上传失败', err);
          } else {
            console.log('上传成功', data2);
            cos.getObjectUrl(
              {
                Bucket: data.bucket, // 填入您自己的存储桶，必须字段
                Region: data.region, // 存储桶所在地域，例如 ap-beijing，必须字段
                Key: `okeydo/${options.file.name}`, // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），支持中文，必须字段
                Sign: false, // 获取带签名的对象 URL
              },
              (err, data) => {
                setLoading(false);
                if (err) return console.log(err);
                // url为对象访问 url
                const url = data.Url;
                console.log('[url]', url);
                options.onSuccess(url);
                onChange(url);
              },
            );
          }
        },
      );
    } catch (e) {
      setLoading(false);
      console.log('上传异常', e);
    }
    // return resolve([]);
  };

  return (
    <Upload customRequest={upload} showUploadList={false}>
      <Row>
        <Col span={24}>
          <Button loading={loading}>{value ? '修改' : '上传'}</Button>
        </Col>
        <Col>
          <img className="mt10" src={value} alt="" style={{ width: '100px', height: 'auto' }} />
        </Col>
      </Row>
    </Upload>
  );
}

export default Myupload;
